/**
* @Description: WoShop商城
* @Author: 梧桐
* @Copyright: 武汉一一零七科技有限公司©版权所有
* @Link: www.s1107.com
* @Contact: QQ:2487937004
*/
<template>
  <view class="page">
	<div class="authenticate wrap">
	  <u-input type="text" v-model="shopinfo.name" placeholder="联系人" :border="false"/>
	  <u-input type="text" v-model="shopinfo.phone" placeholder="联系电话" :border="false"/>
	  <u-input type="text" v-model="shopinfo.shopname" placeholder="请输入店铺名称" :border="false"/>
	  <!-- <u-input v-model="shopinfo.shop_desc" type="textarea"  placeholder="请输入店铺描述" :border="true"/> -->
	  <u-input v-model="chooseProvince.label" type="select" placeholder="请填写所在省份" :border="false" @click="openProvince"/>
	  <u-input v-model="chooseCity.label" type="select" placeholder="请填写所在城市" :border="false" @click="openCity"/>
	  <u-input v-model="chooseArea.label" type="select" placeholder="请填写所在地区" :border="false"  @click="openArea"/>
	  <u-input v-model="xxaddress" type="text" placeholder="详细地址" :border="false" />
	    <u-input v-model="chooseType.label" type="select" placeholder="请选择行业" :border="false" @click="openSort"/>
		<u-input v-model="cates" type="select" placeholder="请选择经营类目" :border="false" @click="checkcates"/>
	  <!-- <u-input type="text" v-model="shopinfo.bank" placeholder="请输入身份证号码" :border="true"/> -->
	  <!-- <u-input type="text" v-model="shopinfo.email" placeholder="请输入邮箱" :border="true"/> -->
	 
	</div>
   
    <view class="filephoto">
      <view class="cation-info">营业执照</view>
      <u-upload :action="upLoadAction"  :form-data="formData"  upload-text="上传营业执照" @on-success="uploadSuccess($event,'zhizhao')" max-count="1" ></u-upload>
    </view>
    

    <u-button type="error"  class="person-button" shape="circle" @click="submitinfo">提交审核</u-button>
 
    <u-popup ref="uniPopup" mode="bottom" border-radius="12">
      <scroll-view scroll-y="true" class="scroll-Y">
        <checkbox-group class="uni-list" @change="checkboxChange">
          <label class="label-3">
            <view class="uni-list-cell uni-list-cell-pd" v-for="(item,index) in catesinfo" :key="index">
              <checkbox :value="item.id" class="checkbox-3">{{item.cate_name}}</checkbox>
            </view>
          </label>
        </checkbox-group>
      </scroll-view>
    </u-popup>
    
    <mpvue-picker ref="mpvuePicker" :mode="mode" :pickerValueDefault="pickerValueDefault" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="getNavList">
    </mpvue-picker>
    <mpvue-picker ref="mpvuePickerProvince" :mode="mode" :pickerValueDefault="pickerValueDefaultProvince" @onChange="onChangeProvince" @onConfirm="onConfirmProvince" @onCancel="onCancelProvince" :pickerValueArray="getProvinceList">
    </mpvue-picker>
    <mpvue-picker ref="mpvuePickerCity" :mode="mode" :pickerValueDefault="pickerValueDefaultCity" @onChange="onChangeCity" @onConfirm="onConfirmCity" @onCancel="onCancelCity" :pickerValueArray="getCityList">
    </mpvue-picker>
    <mpvue-picker ref="mpvuePickerArea" :mode="mode" :pickerValueDefault="pickerValueDefaultArea" @onChange="onChangeArea" @onConfirm="onConfirmArea" @onCancel="onCancelArea" :pickerValueArray="getAreaList">
    </mpvue-picker>
  </view>
</template>
<script>

import mpvuePicker from '@/components/mpvue-picker/mpvuePicker'
import md5Libs from "uview-ui/libs/function/md5";
import fly from "../../api/config";

const {md5} = md5Libs;
const {baseURL} =fly.config
let  uploadData={}
let indus_id = null // 行业id
let arrId = [] // 经营类目id

export default {
  components: {
    mpvuePicker
  },
  
  data() {
    return {
      showPopupBottom: false,
      formData:{},
      upLoadAction:'',
      mode: 'selector',
      pickerValueDefault: [0],
      pickerValueDefaultProvince: [0],
      pickerValueDefaultCity: [0],
      pickerValueDefaultArea: [0],
      ruzhuinfo: [], // 所有行业信息
      catesinfo: [], // 所有经营类目
      industry_name: '', // 选中的行业
      cates: '', // 选择经营类目
      xxaddress: '', // 详细地址
      shopinfo: {}, // 商家注册信息
      settledType: 2, // 申请入住类型 1 个人入驻  2商家入驻  3 网红入驻
      pirkCity: {
        prores: [],
        cityres: [],
        areares: []
      },
      pro_name: {},
      city_name: {},
      area_name: {},
      disabled: 0,
      disabled2: 0,
      portrait: '', // 头像
      cardZ: '', //身份证正面
      cardF: '', //身份证背面
      frsfz_pic: '', // 手持身份证
      license: '', // 营业执照
      supplement: '', // 补充材料
      indexValue: 0,
      chooseType: {},
      chooseProvince: {},
      chooseCity: {},
      chooseArea: {},
      listType: true,
      industryRate:''

    }
  },
  onLoad(option) {
    this.settledType = option.typeshop || 1
     const apiUrl = '/api/Common/uploadPic'
    console.log(apiUrl)
    this.upLoadAction = `${baseURL}${apiUrl}`
    this.formData = this.$http.returnCommonParams(apiUrl,'applyinfo')
    this.getruzhuinfo()
  },
  onShow() {
    this.$http.getpro().then(res => {
      if (res.status == 200) {
        this.pirkCity.prores = res.data
      }
    })
  },
  computed: {
    getNavList() {
      return this.ruzhuinfo.map(res => ({
        label: res.industry_name,
        value: res.id,
      }))
    },

    getManageList() {
      return this.catesinfo.map(res => ({
        label: res.cate_name,
        value: res.id
      }))
    },
    getProvinceList() {
      return this.pirkCity.prores.map(res => ({
        label: res.pro_name,
        value: res.id
      }))
    },
    getCityList(val) {
      return this.pirkCity.cityres.map(res => ({
        label: res.city_name,
        value: res.id
      }))
    },
    getAreaList(val) {
      return this.pirkCity.areares.map(res => ({
        label: res.area_name,
        value: res.id
      }))
    },
  },
  watch: {
    chooseType(val) {
      this.getSortName(val.value[0])
    },
    chooseProvince(val){
      this.pirkCity.prores.forEach((element, k) => {
        if (element.id == val.value) {
          this.pro_name = element
          this.$http.getcity({
            pro_id: element.id
          }).then(res => {
            if (res.status == 200) {
              //    this.city_name = res.data[0]
              this.pirkCity.cityres = res.data
              this.disabled = 1
            }
          })
        }
      });
    },
    chooseCity(val){
      this.pirkCity.cityres.forEach((element, k) => {
        if (element.id == val.value) {
          this.city_name = element
          this.$http.getarea({
            city_id: element.id
          }).then(res => {
            if (res.status == 200) {
              //    this.area_name = res.data[0]
              this.pirkCity.areares = res.data
              this.disabled2 = 1
            }
          })
        }
      });
    },
    chooseArea(val){
      this.pirkCity.areares.forEach((element, k) => {
        if (element.id == val.value) {
          this.area_name = element
        }
      });
    }
  },
  methods: {
    uploadPic(type){
      $utils.chooseImg().then(res => {
        this.$loading('上传中')
        console.log(res.tempFilePaths[0])
        this.$http.uploadPic(res.tempFilePaths[0],'applyinfo').then(result=>{
          const resData = JSON.parse(result.data)
        
          if(resData.length===1){
            this.uploadData[type] = resData[0].dz
          }else{
          this.uploadData[type] = resData.map(res=>res.dz)
          }
          this.$hideLoading()
        })
      })
    },
    uploadSuccess(data,img){
      uploadData[img] = data.data[0].dz
    },

    openSort() {
      this.$refs.mpvuePicker.show();
    },
    onConfirm(e) {
      console.log("-> ", e);
      this.chooseType = e
      this.indexValue = e.index[0]
      let list = this.ruzhuinfo.find(res=>(res.id===e.value[0]))
      console.log("-> list", list);
      this.industryRate = list.remind
    },
    onChange(e) {
      this.listType = true
      this.chooseType = e
    },
    onCancel(e) {
      console.log(e);
    },
    openProvince() {
      this.$refs.mpvuePickerProvince.show();
    },
    onConfirmProvince(e) {
      this.chooseProvince = e
    },
    onChangeProvince(e) {
      this.chooseProvince = e
    },
    onCancelProvince(e) {
      console.log(e);
    },
    openCity() {
      this.$refs.mpvuePickerCity.show();
    },
    onConfirmCity(e) {
      this.chooseCity = e
    },
    onChangeCity(e) {
      this.chooseCity = e
    },
    onCancelCity(e) {
      console.log(e);
    },
    openArea() {
      this.$refs.mpvuePickerArea.show();
    },
    onConfirmArea(e) {
      this.chooseArea = e
    },
    onChangeArea(e) {
      this.chooseArea = e
    },
    onCancelArea(e) {
      console.log(e);
    },
    bindPickerChange: function (index, e) {
      if (index == 1) {
      } else if (index == 2) {
      } else {
      }
    },
    checkcates() {
      if(!this.chooseType.label) return this.$toast('请选择行业')
      this.$refs.uniPopup.open();
    },
    /**
     * 申请入驻获取相关信息 获取行业
     */
    getruzhuinfo() {
      this.$http.getruzhuinfo().then(res => {
		  if(res.status == 204){
			  clearInterval(this.Loop); //再次清空定时器，防止重复注册定时器
			  var that = this
			  this.Loop = setTimeout(function() {
			  
			  	uni.showModal({
			  		title: '温馨提示',
			  		content: '请先绑定手机号',
			  		success: function(res) {
			  			if (res.confirm) {
			  				// that.delzz(that.shiId)
							uni.navigateTo({
								url:'/pages/tabBar/bianji/bangphone'
							})
			  			} else if (res.cancel) {
			  				console.log('用户点击取消');
			  			}
			  
			  		}
			  	});
			  }.bind(this), 100);
		  }
		  console.log(res,"fenlei")
        if (res.status == 200) {
          if (res.data.zhuangtai == 3) {
            // 为1或2时正常 为3时跳转到审核状态页
            return uni.redirectTo({
              url: '/pagesB/moneyCartSon/Settledin'
            });
          // } else if (res.data.zhuangtai == 4) {
          //   return uni.redirectTo({
          //     url: '/pagesC/loginSon/settingWx'
          //   });
          } else {
            this.$nextTick(() => {
              this.ruzhuinfo = res.data.industryres
            })
          }
        }
      })
    },
    /**
     * 经营类目接口
     */
    getSortName(id) {
      this.$http.getcates({
        indus_id: id
      }).then(res => {
        if (res.status == 200) {
          this.catesinfo = res.data
        }
      })
    },
  
    /**
     * 经营类目
     */
    checkboxChange(e) {
      arrId = e.detail.value
      console.log(arrId.join(','), '++++++')
      let str = []
      for (var i = 0; i < this.catesinfo.length; i++) {
        for (var k = 0; k < arrId.length; k++) {
          if (arrId[k] == this.catesinfo[i].id) {
            str.push(this.catesinfo[i].cate_name)
            //    str += this.catesinfo[i].cate_name
            this.$refs.uniPopup.close();
          }
        }
      }
      this.cates = str.join('、')
    },
    /**
     * 提交资料审核
     */
    submitinfo() {
      
      if (!this.chooseType.label ) {
        return   this.$toast('请选择行业')
      }
      // if (this.cates == '') {
      //   this.$toast('请选择经营类目')
      //   return false
      // }
      // if (!uploadData['logo']) {
      //   this.$toast('店铺Logo')
      //   return false
      // }
      if (this.shopinfo.name == '' || this.shopinfo.name == undefined) {
        this.$toast('请输入真实姓名')
        return false
      }
      if (this.shopinfo.phone == '' || this.shopinfo.phone == undefined) {
        this.$toast('请输入正确的手机号')
        return false
      }
      // if (this.shopinfo.bank == '' || this.shopinfo.bank == undefined) {
      //   this.$toast('请输入身份证号码')
      //   return false
      // }
   
      if (this.shopinfo.shopname == '' || this.shopinfo.shopname == undefined) {
        this.$toast('请输入店铺名称')
        return false
      }
      if (!this.pro_name.pro_name && !this.city_name.city_name && !this.area_name.area_name) {
        this.$toast('你还未添加地址')
        return false
      }
      if (this.xxaddress == '') {
        this.$toast('详细地址')
        return false
      }
      if (!uploadData['zhizhao'] && this.settledType == 2) {
        this.$toast('请上传营业执照照片')
        return false
      }
      const data = {
        apply_type: this.settledType,
        indus_id: this.chooseType.value[0],
        service_rate:this.industryRate,
        cate_ids: arrId.join(','),
        shop_name: this.shopinfo.shopname,
        shop_desc: this.shopinfo.shop_desc,
        logo: uploadData['logo'],
        sfzz_pic: uploadData['sfzz_pic'],
        sfzb_pic: uploadData['sfzb_pic'],
        frsfz_pic: uploadData['frsfz_pic'],
        zhizhao: this.settledType == 1?uploadData['zhizhao']:'',//zhizhao
        sfz_num: this.shopinfo.bank,
        contacts: this.shopinfo.name,
        telephone: this.shopinfo.phone,
        email: this.shopinfo.email,
        pro_id: this.pro_name.id,
        city_id: this.city_name.id,
        area_id: this.area_name.id,
        address: this.xxaddress,
      }
    this.$loading('正在上传中...')
      this.$http.applyShop(data).then(res => {
        console.log("-> res", res);
        if (res.status == 200) {
          this.$toast(res.mess)
          this.$hideLoading()
          setTimeout(() => {
            uni.redirectTo({
              url: '/pagesB/moneyCartSon/Settledin'
            });
          }, 1000)
        } else {
          this.$toast(res.mess)
        }
      })
    },

  },
}
</script>
<style lang="scss" scoped>
.page{
  margin-top: 15upx;
  background-color: #fff;
  // padding-bottom: 140upx;
}
.per-lists {
  margin: 0 !important;
  picker {
    width: 100%;
    input {
      width: 100%;
      color: #333;
    }
  }
  .infoImg {
    width: 80upx !important;
    height: 80upx !important;
    border-radius: 10upx;
  }
  .items-images {
    padding: 0 30upx 30upx 30upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    image {
      width: 49% !important;
      height: 215upx !important;
    }
  }
}
.cation-info {
  background-color: #eee;
  padding: 16upx 30upx;
  color: #555;
}

.person-button {
	height: 80rpx;
	// background-color: #ff3d3d;
	border-radius: 10rpx;
	position: position;
	width: 94%;
	left: 1vw;
	bottom: 110rpx;
}
.scroll-Y {
  height: 500upx;
}
.uni-list-cell-pd {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 90upx;
  line-height: 90upx;
  padding-left: 30upx;
}
.checkbox-3 {
  width: 100%;
  text-align: left;
}
.idCard{
  background-color: #fff;
  padding: 20upx;
}
.wrap{
  width: 94vw;
  margin: 0 auto;
  /deep/.u-input{
	height: 100rpx;
	border-bottom: 1rpx solid #eee;
	.u-input__input{
		height: 100rpx;
		line-height: 100rpx;
		.input-placeholder{
			color: #999!important;
		}
		.uni-input-input{
			font-size: 30rpx;
		}
	}
	.uicon-arrow-down-fill{
		&::before{
			content: '';
			width: 16rpx;
			height: 16rpx;
			border-top: 2px solid #999999;
			border-right: 2px solid #999999;
			transform: rotate(45deg);
			position: absolute;
			right: 3vw;
			top: 8rpx;
		}
	}
  }
}
.filephoto{
	height:calc(99vh - 880rpx) ;
	.cation-info{
		background-color: #F5F5F5;
	}
	background-color: #F5F5F5;
	/deep/.u-list-item{
		background-color: #fff;
	}
}
.shopInfoWrap{
  @extend  .wrap
}
.tipsText{ 
  margin: 10upx 25upx;
  color: #999;
}
/deep/ .u-input--border{
  border:1upx solid #efefef!important;
  margin: 12upx 0;
}
.rate{
  font-size: 24upx;
  color:#999
}
</style>
